<template>
  <div class="modal" @click="closeModal">
    <div class="modal-content" @click.stop>
      <img :src="GetHeadImage(currentItem.img)" alt="放大图片" class="modal-image" />
      <div class="modal-body">

        <div class="user-info">
          <img :src="GetHeadImage(currentItem.headImg)" alt="用户头像" class="avatar" />
          <span>{{ currentItem.name }}</span>
          <button @click="follow" :class="isFollowing ? 'unfollowed-btn' : 'follow-btn'">{{ isFollowing ? '已关注' : '关注' }}</button>
        </div>
        
        <div class="post-details" >
          <h2>{{ currentItem.title }}</h2>
          <p class="content">{{ currentItem.postContent }}</p>
          <div style="display: flex;">
            <p class="timestamp">{{ currentItem.createdAt }}</p>
            <button @click="showOptions" class="options-button">...</button>
          </div>
        <div v-if="optionsVisible" class="options-dropdown">
          <button @click="report" >举报{{currentItem.name}}此帖子</button>
        </div>
        </div>
        
        
        <div class="comments">
            <div v-for="(comment, index) in currentItem.comments" :key="index" class="comment">
                <img :src="GetHeadImage(comment.avatar)" alt="头像" class="avatar" />
                <div>
                    <div class="comment-username">{{ comment.name }}</div>
                    <div class="comment-content">{{ comment.content }}</div>
                    <div class="comment-time">{{ comment.time }}</div>
                    <div class="comment-interactions">
                        ❤ {{ comment.likes }} 🗨️ {{ comment.replies }}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="input-area">
          <img :src="currentItem.myAvatar" alt="我的头像" class="avatar" />
          <input type="text" placeholder="说点什么..." v-model="commentInput" @keyup.enter="sendComment" class="comment-input" />
          <button @click="sendComment" class="send-button">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch,defineProps} from 'vue';
import { defineEmits } from 'vue';
const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  currentItem: {
    type: Object,
    required: true,
  }
});
const emit = defineEmits(['close'])
const GetHeadImage = (imgsrc) => new URL(imgsrc, import.meta.url).href;
const isFollowing = ref(false);
const commentInput = ref('');
const currentItem = ref(props.currentItem);

watch(() => props.currentItem, (newItem) => {
  currentItem.value = newItem; // 当 props.currentItem 更新时，更新 currentItem
});



const closeModal = () => {
  emit('close'); // 发射 close 事件，通知父组件关闭模态
};

const follow = () => {
  isFollowing.value = !isFollowing.value;
};



const sendComment = () => {
  if (commentInput.value.trim() !== '') {
    const newComment = {
      avatar: '/src/assets/img/my_head.png', 
      name: '脏脏包', 
      content: commentInput.value,
      time: new Date().toLocaleTimeString(), // 当前时间
      likes: 0,
      replies: 0,
    };

    emit('update-comments', newComment); // 触发事件并传递新评论
    commentInput.value = ''; // 清空输入框
  }
};

const optionsVisible = ref(false);


// 方法：切换选项显示状态
const showOptions = () => {
  optionsVisible.value = !optionsVisible.value;
};

// 方法：举报逻辑
const report = () => {
  console.log('举报此帖子');
};



</script>

<style scoped>
.modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 800;
}

.modal-content {
  background-color: #fff;
  position: relative;
  max-width: 800px;
  border-radius: 20px;
  width: 100%;
  
  display: flex;
}

.modal-image {
  max-width: 60%;
  height: auto;
  border-radius: 20px;
}

.modal-body {
  display: flex;
  flex-direction: column;
  height: 100%;          
  overflow: hidden;      
}

.user-info, .post-details {
  margin-bottom: 10px; /* 给用户信息和帖子详情添加间隔 */
}

.user-info {
  display: flex;
  margin: 10px;
}

.user-info span{
  flex: 1;
}

.user-info button{
  width: 70px;
  height: 30px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.unfollowed-btn {
  background-color: red;
  color: white;
}

.isfollowing {
  background-color: white; 
  color: black;
  transition: background-color 2s; 
}

.timestamp{
  flex:1;
}

.options-button{
  float: left;
  border: 0;
  background-color: #fff;
}

.options-dropdown {
  margin-top: 5px; /* 为新按钮添加上边距 */
  background-color: #f0f0f0; /* 背景色 */
  border: 1px solid #ccc; /* 边框 */
  padding: 10px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
}

.comments {
  flex: none;             /* 占据剩余空间 */
  height: 270px;
  overflow-y: auto;    /* 允许评论部分滚动 */
  padding: 10px;       /* 添加一些内边距 */
  background-color: #f9f9f9; /* 可选：为评论区添加背景色以便区分 */
  
}

.comment {
  display: flex;
  margin-bottom: 10px;
}

.comment-content, .content{
  display: -webkit-box; /* 使元素成为 flexbox */
  -webkit-box-orient: vertical; /* 设置方向为纵向 */
  -webkit-line-clamp: 3; /* 限制显示的行数为 3 行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 添加省略号 */
  max-height: 4.5em; /* 设置最大高度以适应 3 行文本 */
  line-height: 1.5em; /* 设置行高 */
}


.input-area {
  margin-top: auto; /* 将输入区域推到底部 */
  display: flex; /* 可以选择如果需要并排显示头像和输入框 */
  align-items: center; /* 垂直居中对齐 */
  flex:1;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-input {
  flex: 1;
  padding: 5px;
  margin-left: 10px;
}

.send-button {
  margin-left: 10px;
}

</style>
